<template>
  <view>
    <u-form labelPosition="left" :model="form"  ref="form">
      <u-form-item
          label="原告姓名"
          prop="plaintiffName"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.plaintiffName"
            placeholder="请输入原告姓名"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="原告性别"
          prop="plaintiffSex"
          borderBottom
          @click="showPlaintiffSex = true; "
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.plaintiffSex"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择原告性别"
            border="none"
        ></u-input>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
          label="原告身份证号"
          prop="plaintiffID"
          borderBottom
          ref="item1"
          labelWidth="95"
      >
        <u-input
            v-model="form.plaintiffID"
            placeholder="请输入原告身份证号"
            border="none"
            type="number"
            maxlength="18"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="原告联系电话"
          prop="plaintiffPhone"
          borderBottom
          ref="item1"
          labelWidth="95"
      >
        <u-input
            v-model="form.plaintiffPhone"
            placeholder="请输入原告联系电话"
            border="none"
            type="number"
            maxlength="11"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="原告住址"
          prop="plaintiffAddress"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.plaintiffAddress"
            placeholder="请输入原告住址"
            border="none"
        ></u-input>
      </u-form-item>
    </u-form>
    <u-action-sheet
        :show="showPlaintiffSex"
        :actions="actions"
        title="请选择原告性别"
        @close="showPlaintiffSex = false"
        @select="sexSelectPlaintiff"
    >
    </u-action-sheet>

  </view>

</template>

<script>
export default {
  name: "plaintiffInfo",
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    newForm(val, oldVal){
      this.$emit('updateForm', val)
    },
    form(){
      this.newForm = this.form;
    },
  },
  mounted() {
    this.newForm = this.form;
  },
  data(){
    return{
      newForm:{},
      showPlaintiffSex: false,
      actions: [{
        name: '男',
      },
        {
          name: '女',
        },
      ],
    }
  },
  methods:{
    sexSelectPlaintiff(e) {
      this.form.plaintiffSex = e.name
      this.$refs.form.validateField('plaintiffSex')
    },

  }
}
</script>

<style scoped>

</style>